<template>
  <div class="post_box">
    <div v-if="data">
      <div class="helf">
        <router-link to="/" class="helf_element">首页</router-link>/
        <router-link :to="`/column/${data.column}`" class="helf_element">专栏</router-link>/
        <p class="helf_element">{{ data.title }}</p>
      </div>
      <div class="img">
        <img :src="data.image && data.image.url">
      </div>
      <h2 class="title">{{ data.title }}</h2>
      <div class="atour">
        <div class="atour_border" v-if="data.author && data.author.avatar">
          <img :src="data.author.avatar.url">
        </div>
        <div class="atour_context">
          <h3>{{ data.author.nickName }}</h3>
          <h5>{{ data.author.email }}</h5>
        </div>
        <h5 class="atour_context" style="margin:0">
          <h5 style="margin:0">发布于{{ data.createdAt }}</h5>
        </h5>
      </div>
    </div>
    <div class="main" ref="div"></div>
    <div class="btn-group my-1" v-show="showBtmBtn">
      <button class="btn btn-success" @click="pushModification">编辑</button>
      <button class="btn btn-danger" @click="showMessage()">删除</button>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { marked } from 'marked'
import { useRoute, useRouter } from 'vue-router'
import { reqSomePost, reqDelPost } from '../../api/main'
import { useStore } from 'vuex'
import { useModel } from '../../components/Bionic'
import { Message } from '../../coustom/Message'
interface postData {
  "_id": string,
  "title": string,
  "excerpt": string,
  "content": string,
  "image"?: {
    "_id": string,
    "url": string,
    "createdAt": string
  },
  "author": {
    "_id": string,
    "email": string,
    "nickName": string,
    "description": string,
    "avatar": {
      _id: string
      url: string
    }
    "column": string,
    "createdAt": string
  },
  "column": string,
  "createdAt": string
}


export default defineComponent({
  name: 'Post',
  setup() {
    const route = useRoute()
    const store = useStore()
    const router = useRouter()
    const data = ref<postData | null>(null)
    const div = ref<HTMLDivElement | null>(null)
    onMounted(() => {
      getData()
    })
    const showMessage = () => useModel({
      titel: '删除文章',
      context: '是否删除文章，请慎重考虑',
      okText: '是的',
      cancelText: '不是',
      onOk: () => {
        if (data.value) {
          reqDelPost(data.value._id).then(success => {
            Message.success('删除成功')
            router.replace(`/column/${data.value?.column}`)
          }).catch(() => {
            Message.error('删除失败请重试')
          })
        }

        return true
      }
    })
    const getData = async () => {
      data.value = (await reqSomePost(route.params.id as string)).data as unknown as postData
      console.log(data.value)
      if (div.value) {
        div.value.innerHTML = marked(data.value.content)
      }
    }
    const showBtmBtn = computed(() => {
      if (data.value) {
        return data.value.author._id === store.getters.userID
      }
      return false
    })
    watch(() => route.params, () => {
      getData()
    })
    const pushModification = () => {
      if (data.value) {
        router.push(`/modification/${data.value._id}`)
      }
    }

    return {
      data, div, showBtmBtn, pushModification, showMessage
    }
  }
})
</script>
<style scoped lang="less">
.post_box {
  max-width: 800px;
  width: auto;
  margin: 0 auto;

  .helf {
    display: flex;
    margin: 20px 0;

    .helf_element {
      margin: 0 10px;
    }
  }

  .img {
    img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
  }

  .title {
    margin: 20px 0;
  }

  .atour {
    width: 100%;
    height: 90px;
    border-top: 1px solid rgb(222, 226, 230);
    border-bottom: 1px solid rgb(222, 226, 230);
    display: flex;
    align-items: center;

    .atour_border {
      padding: 5px;
      border: 1px solid rgb(222, 226, 230);
      border-radius: 50%;

      img {
        width: 70px;
        border-radius: 50%;
      }
    }

    .atour_context {
      flex: 50%;

      h3 {
        font-size: 18px;
      }

      h5 {
        font-size: 16px;
        color: rgb(108, 117, 125);
      }
    }

    .atour_timer {
      flex: 50%;
    }

    .main {
      margin: 30px 0;
    }
  }

}
</style>